<template>
	<view class="container">
		<view class="uni-form-item uni-column">
			<uni-icons type="search" size="18" color="#9F9F9F"></uni-icons>
			<input class="uni-input" placeholder-style="color:#9F9F9F" placeholder="搜索点播内容" />
		</view>

		<uniSegmentedControl :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			active-color="#33D6A6" style="width: 235px;overflow: inherit;">
		</uniSegmentedControl>

		<view class=" content">
			<view v-show="current === 0">
				<uniGrid :column="3" :showBorder="false" :highlight='false' :square="false">
					<view v-for="(item,index) in movieList" :key="index" @click="onClick(item)">
						<uniGridItem style="margin-top: 30rpx;">
							<image :src="item.url" mode="" style="width:194rpx;height:254rpx;"></image>
							<view class="text">
								<text>{{item.title}}</text>
								<text class="textStyle">{{item.introduce}}</text>
							</view>
						</uniGridItem>
					</view>
				</uniGrid>
			</view>
			<view v-show="current === 1">
				<text>222</text>
			</view>
			<view v-show="current === 2">
				<text>333</text>
			</view>
			<view v-show="current === 3">
				<text>4444</text>
			</view>
		</view>


	</view>
</template>

<script>
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	import uniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'
	export default {
		components: {
			uniSegmentedControl,
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				current: 0,
				items: ['全部', '旅游', '访谈', '娱乐', '电影'],
				movieList: [{
					url: '../../../static/image/video/Rectangle01.png',
					title: '乡村振兴记录',
					introduce: '该纪录片记录了中该纪录片记录了中',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '旅游',
					introduce: '该纪录片记录了中该纪录片记录了中',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '访谈',
					introduce: '该纪录片记录了中该纪录片记录了中',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '娱乐',
					introduce: '该纪录片记录了中该纪录片记录了中',
				}, {
					url: '../../../static/image/video/Rectangle01.png',
					title: '乡村振兴记录',
					introduce: '该纪录片记录了中该纪录片记录了中',
				}]

			}
		},


		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			onClick(item) {
				let navData = JSON.stringify(item);
				console.log(navData)

				// uni.navigateTo({
				// 	url:`./wonderfulTv?item=${encodeURIComponent(JSON.stringify(item))}`
				// })
				uni.navigateTo({
					url: `./wonderfulTv?item=${navData}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;

		.uni-form-item {
			background: #F3F4F6;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 24rpx;
			margin-bottom: 16rpx;

			.uni-input {
				margin-left: 20rpx;
			}
		}

		.uni-padding-wrap {
			padding: 0px;
		}


		.content {
			width: 100%;

			/deep/ .uni-grid-item__box {
				align-items: center;
			}

			.text {
				display: flex;
				flex-flow: column;
				align-items: end;
				text-align: left;
				font-size: 26rpx;
				margin-top: 9rpx;

				.textStyle {
					width: 107px;
					font-size: 21rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}



		}


	}
</style>
